高德地图自适应显示多个标记点的应用

您所在的位置：网站首页 › 高德地图多个标记怎么关闭啊 › 高德地图自适应显示多个标记点的应用

高德地图自适应显示多个标记点的应用

2024-07-15 14:51| 来源: 网络整理| 查看: 265

需求：在这里插入图片描述

今天leader给我一个任务，要求实现左边树勾选多个时地图上的点做一个聚合效果，现状是每次勾选都会把当前勾选项的坐标作为中心点定位过去。之前我也没有地图相关的经验，然后就去看高德地图的api：开始我想做成勾选多个就聚合成一个点的样子，就是我们平时缩小地图时看到的那样，但是我没找到实现方式。后来沟通确认需求是想能同时看到勾选的多个点在这里插入图片描述实现过程：

一开始看了api的点聚合功能AMap.MarkerClusterer，发现使用这个可以在缩放地图的时候自适应的聚合，它相当于是开启地图的点聚合功能，在缩放地图的时候生效。但是这个不能实现主动聚合指定的几个点。

在这里插入图片描述

然后看到了自适应显示多个标记点的方法，方法说明是通过Map.setFitView自动适配地图级别和中心，该方法的官方说明可以查看地址https://lbs.amap.com/api/javascript-api/guide/map/state/?sug_index=0，使点标记同时显示在视野内，这个就能实现我想要的效果。把每次勾选的标记点放到一个数组传给Map.setFitView()方法即可，实现代码如下：

createOverlay(points) { this.map.setFitView(points);//自适应显示 }

继续看api，看到根据覆盖物范围调整视野，其中覆盖物可以是矢量图形，就是用多个标记点连线绘制的图形，然后调用自适应方法Map.setFitView()，我根据多边形自适应的代码如下：

// 根据勾选的多个点创建透明图层并自适应 createOverlay(points) { // 清除之前的多边形 this.map.remove(this.polygon) if(points.length === 0) { this.map.setCenter(this.center) this.map.setZoom(this.zoom) return } this.polygon = new AMap.Polygon({ path : points, //以勾选的多个点的坐标创建一个隐藏的多边形 map: this.map, strokeOpacity: 0,//透明 fillOpacity: 0,//透明 bubble: true//事件穿透到地图 }); this.map.setFitView([this.polygon]);//自适应显示 }

【本文地址】

高德地图自适应显示多个标记点的应用

高德地图自适应显示多个标记点的应用

今日新闻

推荐新闻